<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>圈圈生活-抽奖</title>
	<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
	<link href="css/main.css" rel="stylesheet" />
</head>

<body class="body">
<div class="viewport" id="viewport">
<div class="header">
<h1 class="title"></h1>
<em id="openDialog" class="gz"></em>
<div class="content">
<div class="wheel">
     <ul id="wheel" class="wheel-list">
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName0"></h3>
                 <p><img id="lImg0" src="img/0.png" alt=""></p>
             </div>
         </li>
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName1"></h3>
                 <p><img id="lImg1" src="img/0.png" alt=""></p>
             </div>
         </li>
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName2"></h3>
                 <p><img id="lImg2" src="img/0.png" alt=""></p>
             </div>
         </li>
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName3"></h3>
                 <p><img id="lImg3" src="img/0.png" alt=""></p>
             </div>
         </li>
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName4"></h3>
                 <p><img id="lImg4" src="img/0.png" alt=""></p>
             </div>
         </li>
         <li>
             <i></i>
             <div class="prize">
                 <h3 id="lName5"></h3>
                 <p><img id="lImg5" src="img/0.png" alt=""></p>
             </div>
         </li>
     </ul>
     <em class="iconbg"></em>
     <em class="icon"><img src="img/san.png" alt=""></em>
 	<div class="pointer" id="button"><img src="img/pointer.png" alt="pointer"/></div>              
     
 </div>
</div>
</div>

<div class="winners">
<h2><em>中奖名单</em></h2>

<div class="list">
<ul id="winnerUsers">

	</ul>
</div>
</div>
<div id="showText"></div>
<div class="footer"><img alt="" src="img/footer.png" /></div>
</div>
<div id="alertBox" class="alertBox">
    <div class="alertcontent">
    	<em class="alerttitle"></em>
        <em class="alertclose" id="closeDialog"></em>
        <p>1、活动时间：2017年4月17日00:00—4月30日23:59。</p>
        <p>2、加入桃源居，在社区首页签到即可参与转盘抽奖。</p>
        <p>3、活动期间每个用户每天可抽奖1次。</p>
        <p>4、奖品分为实物奖励和虚拟奖励。</p>
        <p>5、奖品包括：高级餐具、当日时蔬、当日肉（蛋）、100圈币、1000圈币、1圈币。</p>
        <p>6、实物奖励需填写用户地址，支付0.01元人民币即可配送到家。</p>
        <p>7、客服电话:18948328120、0755-83238363。</p>
        <p>8、活动最终解释权归幸福圈圈科技有限公司所有</p>
    </div>
</div>
<script type="text/javascript">
var turnWheel = {
    rewardNames:[],				//转盘奖品名称数组
    imgs:[],
    userDrawList:[]
};
window.onDeviceOneLoaded = function() {
	var nf = sm("do_Notification");
	var app = sm("do_App");
	var page = sm("do_Page");
	var drawUrl = require("url/draw");
	var userUrl = require("url/user");
	var qqHttp = require("helper/http");
	var openHelper = require("helper/open");
	var userUtil = require("helper/user");
	
	/**/
    var alertId = document.getElementById("alertBox");
    var openDialog = document.getElementById("openDialog");
    var closeDialog = document.getElementById("closeDialog");
    openDialog.onclick = function(){
        //alertId.className = "alertBox animated bounce";
    }
    closeDialog.onclick = function(){
        alertId.className = "alertBox";
    }
    
	var type=page.getData().type;
	var bizzId=page.getData().bizzId;
	var drawId=page.getData().drawId;
	var rewardNames=page.getData().rewardNames;
	var imgs=page.getData().imgs;
	turnWheel.rewardNames=rewardNames;
	turnWheel.imgs=imgs;
	turnWheel.userDrawList=page.getData().userDrawList;
	
    var totalNum = 6 ; // 转盘 总数
    var trunNum = [ 0 , 1 , 2 , 3 , 4 , 5 ]; //概率奖品 编号
    var isStatr = false ; //锁 专拍没有执行完的时候 不可以再次点击 ;
    var lenCloc = 0 ; //当前第几次计算叠加的度数
    var turn  = 5 ; //转盘旋转最低的圈数

    var brn = document.getElementById("button");
    var wheel = document.getElementById("wheel");
    for(var i=0;i<totalNum;i++){
    	document.getElementById("lName"+i).innerHTML=rewardNames[i]; 
    	document.getElementById("lImg"+i).src=imgs[i];
    }
   
  //中间列表
    var winners=[];
	var winnerUsers = document.getElementById("winnerUsers");
	for (var j = 0,length = turnWheel.userDrawList.length;j<length; j++) {
		var userDraw=turnWheel.userDrawList[j];
		winners.push("<li><span>"+userDraw.strNewAt.slice(5)+"</span>"+userDraw.userNick+"喜获:"+userDraw.drawItemName+"</li>")
	}
	winnerUsers.innerHTML = winners.join("");
	if(turnWheel.userDrawList.length>5){
		winnerUsersList();
	}
	var mallProduct;
	var couponUserId;
	var mallShopVo;
    /* 点击 开始  */
    brn.onclick = function(){
        if(!isStatr){
            isStatr = true;
            qqHttp.post(userUrl.url.draw.add, {drawBaseId:drawId,type:type,bizzId:bizzId}, function(data) {	
            	operation(data.num);
            	turnWheel.userDrawList = data.userDrawList;
            	if(data.mallProduct){
            		mallShopVo=data.mallShopVo;
            		mallProduct=data.mallProduct;
            		couponUserId=data.couponUserId;
            	}
            	page.fire("drawShare", data);
            },function(){
            	 isStatr = false;
            });
        }else{
            return false;
        }
    }
    
    
    
    page.on("draw_share_addCount", function(data) {
    	type=data.type;
    	bizzId=data.bizzId;
    });
    /*    开始 function  ran = 随机    */
    function operation(ran) {
        lenCloc++;
        var sun = turn*360 ;
        var soBuom =parseInt(Math.floor(Math.random()*60) - 30);
        /*旋转度数 = 上次度数+ 最小圈数 * 360 + 当前数字 * 60 +随机角度  = 最终旋转度数     */
        wheel.style.transform = "rotate("+(lenCloc*sun-ran*60)+"deg)";
		wheel.style.webkitTransform = "rotate("+(lenCloc*sun-ran*60)+"deg)";
		wheel.style.MozTransform = "rotate("+(lenCloc*sun-ran*60)+"deg)";
        setTimeout(function () {
        	var winners=[];
        	for (var j = 0,length = turnWheel.userDrawList.length;j<length; j++) {
        		var userDraw=turnWheel.userDrawList[j];
        		winners.push("<li><span>"+userDraw.strNewAt.slice(5)+"</span>"+userDraw.userNick+"喜获:"+userDraw.drawItemName+"</li>")
        	}
        	winnerUsers.innerHTML = winners.join("");
        	if(turnWheel.userDrawList.length==6){
        		winnerUsersList();
        	}
        	nf.toast("您喜获:" + rewardNames[ran]);
            isStatr = false;
            if(null!=mallShopVo&&mallShopVo.type==1){
            	//toMallOrder(mallProduct);
            }else{
            	openHelper.open("source://view/qshop/detail/main.ui",{shopId:mallShopVo.id});
            }
        }, 3000);
    }
    function toMallOrder(mallProduct){
    	if(!userUtil.loginToken()){
    		openHelper.openLogin();	
    	}else{
    		var total = mallProduct.price;
			var addItems = [];
			var item = {};
			item.productId = mallProduct.productSpecLst[0].id;//默认规格
			item.onlyProductId = mallProduct.id;//id
			item.quantity = 1;
			if(mallProduct.img){
				var imgs = mallProduct.img.split(";");
				item.img = mallProduct.fileDomain + imgs[0];
			}
			item.name = mallProduct.name;
			item.price = mallProduct.productSpecLst[0].price;
			item.marketPrice =mallProduct.productSpecLst[0].marketPrice;
			total = mallProduct.productSpecLst[0].price;
			item.supplierType = mallProduct.supplierTypeCode;
			item.supplierId = mallProduct.supplierId;
			addItems.push(item);
			deviceone.print("couponUserId2"+couponUserId)
			openHelper.open("source://view/mall/cart/toOrder.ui",{addItems:addItems,total:total,fromPage:"draw_index","couponUserId":couponUserId},"","pay_product_back");
    	}
    }
    
}

function winnerUsersList(){
	var winnerUsers = document.getElementById("winnerUsers");
	var can=true;
	winnerUsers.innerHTML+=winnerUsers.innerHTML;
	winnerUsers.onmouseover=function(){can=false};
	winnerUsers.onmouseout=function(){can=true};
	new function (){
		var stop=winnerUsers.scrollTop%100==0&&!can;
		if(!stop)winnerUsers.scrollTop==parseInt(winnerUsers.scrollHeight/2)?winnerUsers.scrollTop=0:winnerUsers.scrollTop++;
		setTimeout(arguments.callee,winnerUsers.scrollTop%100?0:3000);
	};
}
</script></body>
</html>